<template>
  <el-form inline label-width="70px">
    <el-form-item label="white"><el-input placeholder="请输入" v-model="form.white"></el-input></el-form-item>
    <el-form-item label="black"><el-input placeholder="请输入" v-model="form.black"></el-input></el-form-item>
    <el-form-item label="primary"><el-input placeholder="请输入" v-model="form.primary"></el-input></el-form-item>
    <el-form-item label="success"><el-input placeholder="请输入" v-model="form.success"></el-input></el-form-item>
    <el-form-item label="danger"><el-input placeholder="请输入" v-model="form.danger"></el-input></el-form-item>
    <el-form-item label="warning"><el-input placeholder="请输入" v-model="form.warning"></el-input></el-form-item>
    <el-form-item label="info"><el-input placeholder="请输入" v-model="form.info"></el-input></el-form-item>

    <template v-if="type === 'button'">
      <el-form-item label="disableMixColor"><el-input v-model="form.buttonDisabledMixColor"></el-input></el-form-item>
      <el-form-item label="hoverHint"><el-input v-model="form.buttonHoverHint"></el-input></el-form-item>
      <el-form-item label="activeShade"><el-input v-model="form.buttonActiveShade"></el-input></el-form-item>
    </template>

    <template v-else-if="type === 'tag'">
      <el-form-item label="tagMixColor"><el-input v-model="form.tagMixColor"></el-input></el-form-item>
    </template>

    <el-form-item>
      <el-button type="primary" @click="$emit('form-change', form)">生成</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  name: 'ThemeForm',
  props: {
    type: {
      type: String,
      default: 'button' // 'button' | 'tag' | 'link'
    }
  },
  data() {
    return {
      form: {
        white: '#FFFFFF',
        black: '#000000',
        primary: '#0077ff',
        success: '#67C23A',
        danger: '#ff2222',
        warning: '#E6A23C',
        info: '#909399',
        buttonHoverHint: 20,
        buttonActiveShade: 10,
        buttonDisabledMixColor: '#0b121f',
        tagMixColor: '#0B121F'
      }
    }
  }
}
</script>

<style scoped>

</style>
